
import React, {Fragment} from "react";
import {Button, Icon, message, Result, Typography} from "antd";
import Store from "./Store";
import {generatePage} from "../../../../api/work/GenerateApi";
import {observer} from "mobx-react";

@observer
class FinishConfig extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        Store.status = "warning";
        Store.title = "生成页面操作不可逆，请谨慎操作!";
        Store.subTitle = "点击<生成页面>按钮生成页面";
        Store.processList = [];
    }

    // 检查配置
    checkConfig = () => {
        for (let item of Object.values(Store.componentDataSourceMap)){
            if (!item["description"]){
                message.warning("描述不能为空");
                Store.stepCurrent = 1;
                return false;
            }
        }

        if (Store.table_field_display.length === 0){
            message.warning("请选择表格需要展示的字段");
            Store.stepCurrent = 2;
            return false;
        }

        if (Store.search_field_display.length === 0 && Store.checkedList.indexOf("搜索") === 0){
            message.warning("请选择可搜索的字段");
            Store.stepCurrent = 2;
            return false;
        }
        console.log(Store.checkedList.indexOf("批量导入1"))

        if (Store.im_ex_port_field_display.length === 0 && !(Store.checkedList.indexOf("批量导入") === -1 && Store.checkedList.indexOf("批量导出") === -1)){
            message.warning("请选择可导入导出字段");
            Store.stepCurrent = 2;
            return false;
        }

        if (!Store.export_template_filename && !(Store.checkedList.indexOf("批量导入") === -1 && Store.checkedList.indexOf("批量导出") === -1)){
            message.warning("请输入模板文件名");
            Store.stepCurrent = 2;
            return false;
        }

        return true;
    };

    generatePage = () => {
        if (this.checkConfig()){
            //发送请求，生成页面
            let data = {
                //功能列表
                "zone_list":JSON.stringify(Store.checkedList),
                //组件配置
                "component_config":JSON.stringify(Store.componentDataSource),
                //表格展示的字段
                "table_fields":JSON.stringify(Store.table_field_display),
                //搜索的字段
                "search_fields":JSON.stringify(Store.search_field_display),
                //导入导出的字段
                "im_ex_fields":JSON.stringify(Store.im_ex_port_field_display),
                //模板文件名
                "template_filename":Store.export_template_filename,
                //提示信息
                "hint_message":JSON.stringify(Store.hintMessage),
                //页面
                "page":Store.pageRoute
            };
            generatePage(data).then(response => {
                Store.processList = response.data.processList;
                Store.status = response.data.isSuccess ? "success" : "error";
                Store.title =  response.data.isSuccess ? "页面生成成功!" : "页面生成失败";
                Store.subTitle = response.data.isSuccess ? "刷新页面后点击右侧菜单浏览" : "";
            })
        }
    };

    render() {
        const { Paragraph, Text } = Typography;
        return (
            <Fragment>

                <Result
                    status={Store.status}
                    title={Store.title}
                    subTitle={Store.subTitle}
                    extra={[
                        <Button type="primary" onClick={this.generatePage}>生成页面</Button>
                    ]}
                >
                    {Store.processList.length > 0 && <div className="desc">
                        <Paragraph>
                            <Text
                                strong
                                style={{
                                    fontSize: 16,
                                }}
                            >
                                页面生成信息如下:
                            </Text>
                        </Paragraph>
                        {Store.processList.map((item,index) => (
                            <Paragraph key={index}>
                                {
                                    item["status"] === "success"
                                        ?
                                        <Icon twoToneColor="#52c41a" theme="twoTone"  type="check-circle" style={{marginRight:"5px"}} />
                                        :
                                        <Icon twoToneColor="#eb2f96" theme="twoTone"  type="close-circle" style={{marginRight:"5px"}} />
                                }
                                {item["description"]}
                            </Paragraph>
                        ))}

                    </div>}
                </Result>
            </Fragment>
        );
    }
}

export default FinishConfig;
